<template>
    <div class="main-box center-box class-box start mar-top mar-bottom">
        <div class="dl-row mar-bottom-20">
            <div class="search-box" style="margin-right: 20px">
                <el-input
                        placeholder="请输入试题关键词"
                        prefix-icon="el-icon-search"
                        v-model="inputSearch">
                </el-input>
            </div>
            <el-button type="success" round size="small" @click="init()">搜索</el-button>
        </div>

        <div class="border-main mar-bottom-20 sb-main-box sb-error" v-for="(question,index) in data" :key="index" v-loading="loading">

          <div class="dl-row-sb mar-bottom-15">
            <div class="dl-row center answer">
              <h2>{{question.questionDesc}}</h2>
            </div>
          </div>

            <el-collapse accordion class="mar-bottom-15 right-answer">
                <el-collapse-item name="1">
                    <template slot="title">
                        <div class="dl-row center answer">
                            <span class="topic-tag">{{getOptionType(question.optionType)}}</span>
                            <div class="dl-row center">
                                <h1>正确答案：</h1>
                            </div>
                        </div>
                    </template>
                    <div v-for="(right,rightIndex) in getRight(question.lists)" :key="rightIndex">
                      <div class="answer dl-row">
                        <span class="face"></span><p>{{right.answerDesc}}</p>
                      </div>
<!--                        <el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
                    </div>
                </el-collapse-item>
            </el-collapse>



            <ul class="option">
                <li class="dl-row start" v-for="(option,optionIndex) in question.lists"
                    :key="optionIndex">
                    <span :class="setQuestionCls(question,option)"></span>
                    <p>{{option.answerDesc}}</p>
                </li>
            </ul>
        </div>
        <el-pagination
                :total="total"
                :current-page="page + 1"
                style="margin-top: 8px;"
                layout="total, prev, pager, next, sizes"
                @size-change="sizeChange"
                @current-change="pageChange"/>
    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {cancelCollect} from '@/api/collect'

    export default {
        name: "collect",
        mixins: [initData],
        data() {
            return {
				loading:false,
                inputSearch: '',
                rightChecked: true
            }
        },
        created() {
            this.$nextTick(() => {
                this.init()
            });
        },
        methods: {
            getRight(optionList) {
                return optionList.filter(item => item.isTrue === 1)
            },
            getOptionType(optionType) {
                switch (optionType) {
                    case 0:
                        return '单选题';
                    case 1:
                        return '多选题';
                    case 2:
                        return '判断题';
                }
            },
            beforeInit() {
                this.url = 'question/bankSearch'
                this.params = {page: this.page, size: this.size, questionName: this.inputSearch}
                return true
            },
            getRightIds(optionList) {
                return optionList.filter(item => item.isTrue === 1).map(item => item.id)
            },
            setQuestionCls(question, option) {
                let right = this.getRightIds(question.lists);
                if (question.checked === option.id) {
                    return 'error'
                } else if (right.indexOf(option.id) !== -1) {
                    return 'face'
                }
                return ''
            }
        }
    }
</script>

<style scoped>

</style>
